<template>
<!--  <el-container id="appSend">-->
<!--    <el-header>-->
<!--      <h1>修改密码</h1>-->
<!--    </el-header>-->
<!--    <el-main>-->
  <div class="sign">
    <div class="sign-head">
      <span>修改密码</span>
    </div>
      <el-form ref="form"  @submit.prevent="handleSubmit" >
        <el-form-item label="邮箱" prop="email">
          <el-input id="email" v-model="email" type="email" required/>
          <el-button @click="sendVerificationCode">发送验证码</el-button>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input id="code" v-model="code" type="text" required/>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input id="password" v-model="password" type="password" required/>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input id="confirmPassword" v-model="confirmPassword" type="password" required/>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSubmit" type="primary">提交</el-button>
          <!-- 添加取消按钮，点击时触发 handleCancel 方法 -->
          <el-button @click="handleCancel" >取消</el-button>
        </el-form-item>
      </el-form>
  </div>
<!--    </el-main>-->
<!--  </el-container>-->
</template>


<script>
import axios from 'axios';
import { NavName, RouterName, SignInRules } from "@/enums";
export default {

  data() {
    return {
      SignInRules,
      email: "",
      code: "",
      password: "",
      confirmPassword: ""
    };
  },
  methods: {
    async sendVerificationCode() {
      try {
        const email = document.getElementById('email').value;
        const response = await axios.get('http://localhost:8888/user/sendVerificationCode', ({
          params: {
            email: email
          }
        }));
        console.log(response.data);
        this.$message({
          message: response.data.message,
          type: 'success'
        });
      } catch (error) {
        console.error('邮箱提交错误:');
        this.$message({
          message: error.response.data.message,
          type: 'error'
        });
      }
    },
    async handleSubmit() {
      try {
        const email = document.getElementById('email').value;
        const code = document.getElementById('code').value
        const password = document.getElementById('password').value
        const confirmPassword = document.getElementById('confirmPassword').value
        // 检查密码和确认密码是否一致
        if (password !== confirmPassword) {
          this.$message({
            message: '两次输入的密码不一致',
            type: 'error'
          });
          return; // 密码不一致时，阻止表单提交
        }
        const data1 = {
          email: email,
          code: code,
          password: password,
          confirmPassword: confirmPassword
        };
        const response = await axios.post('http://localhost:8888/user/resetPassword', data1);
        console.log(response.data);

        // this.$message({
        //   message: response.data,
        //   type: 'success'
        // });
        this.$message({
          message: response.data.message,
          type: 'success',
        });
        // 当密码修改成功时，重置表单
        if (response.data.success) {
          this.resetForm(); // 调用重置表单函数
        }
      } catch (error) {
        console.error('Error caught:', error); // 输出完整的错误信息用于调试
        // 判断是否存在 response 对象
        if (error.response && error.response.data) {
          const errorMessage = error.response.data.message || error.response.data.error || '未知错误';
          this.$message({
            message: errorMessage, // 显示具体的错误信息
            type: 'error',
          });
        } else {
          this.$message({
            message: '请求失败，请稍后重试', // 显示通用错误提示
            type: 'error',
          });
        }
        // this.$message({
        //   message: 'response.data.message',
        //   type: 'error'
        // });
      }
    },
    resetForm() {
      // 清空表单字段
      this.email = '';
      this.code = '';
      this.password = '';
      this.confirmPassword = '';

      // 如果使用 el-form 组件，还可以调用它的 resetFields 方法重置验证状态
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },

    // 取消操作方法，跳转到登录页面
    handleCancel() {
      this.$router.push({ path: RouterName.SignIn }); // 跳转到登录页面
    }

  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/f-password.scss";
</style>
